<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Weather Crowd : From GovHAck</title>
    <link rel="shortcut icon" href="favicon.ico" />
	
    <link rel="stylesheet" href="css/style.css" media="all" type="text/css" />
    <link rel="stylesheet" href="lib/jquery-ui/css/smoothness/jquery-ui-1.8.15.custom.css" type="text/css" />
    <link rel="stylesheet" href="lib/harvesthq-chosen/chosen.css" type="text/css" />
    <link rel="stylesheet" href="lib/visualize/visualize.css" media="all" type="text/css" />
    <link rel="stylesheet" href="lib/datatables/css/table_jui.css" type="text/css" />
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" type="text/css" />


<style>

.success{
	background-color:#6F9!important;
	color:#000!important;
	}

#status{
	padding:5px;
	background-color:#000;
	color:#fff;}	

</style>

    <script type="text/javascript" src="js/head.load.min.js"></script>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script>
	function success(position) {
		var s = document.querySelector('#status');
		  if (s.className == 'success') {
		  return;
	}
	
	s.innerHTML = "found you!";
	s.className = 'success';
	
	var mapcanvas = document.createElement('div');
	mapcanvas.id = 'mapcanvas';
	mapcanvas.style.height = '300px';
	mapcanvas.style.width = '400px';
	  
	document.querySelector('article').appendChild(mapcanvas);
	
	var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
	var myOptions = {
	  zoom: 15,
	  center: latlng,
	  mapTypeControl: false,
	  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
	
	var marker = new google.maps.Marker({
	    position: latlng, 
	    map: map, 
	    title:"You are here!",
	    
	});
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
		$('#locationres').val(results[1].formatted_address);
		$('#longloc').val(position.coords.longitude);
		$('#latloc').val(position.coords.latitude);
    }}  });
	
	}

	
	
      function error(msg) {
	var s = document.querySelector('#status');
	s.innerHTML = typeof msg == 'string' ? msg : "failed";
	s.className = 'fail';
	
	// console.log(arguments);
      }

      if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(success, error);
      } else {
	error('not supported');
      }

      

</script> 
<script>

</script>
</head>
<body class="bg_c sidebar fixed stA">
    
   	<div id="header">
		<div class="wrapper cf">
			<div class="logo fl">
				<a href="#"><img src="images/logo.png" alt="" /></a>
			</div>	
			<ul class="fr cf" id="main_nav">
			    <li class="nav_item active"><a href="#" class="main_link"><span>Home</span></a><img class="tick tick_a" alt="" src="images/blank.gif" /></li>
			    <li class="nav_item "><a href="thedata.html" class="main_link"><span>The Data</span></a></li>
			    <li class="nav_item "><a href="charts.html" class="main_link"><span>Charts</span></a></li>
			    <li class="nav_item "><a href="contactus.html" class="main_link"><span>Contact Us</span></a></li>
			</ul>
		</div>
	</div>
	
	<div id="main">
		<div class="wrapper cf">
			<div id="main_section" class="cf brdrrad_a">
			   
				<div id="content_wrapper dp100">
						<h1 class="sepH_c">User Input Interface</h1>
						
						 <form action="./UserInputServlet" class="js_submit">
							<div class="formEl_a">
								<fieldset class="sepH_b">
								  <div class="sepH_b cf">
									<label for="emailid" class="lbl_a">Enter your EmailID: </label> 
									<input type="text" id="emailid" name="emailid" class="inpt_a" />
								  </div>
								  <div class="sepH_b dp100">
									<div class="dp50"><label for="a_text" class="lbl_a">Check your location: </label> 
									<input type="text" id="locationres" name="locationres" class="inpt_a" />
									 <section id="wrapper">									     
										  <article>
										    <p><span id="status">Please wait whilst we try to locate you...</span></p>
										  </article>
									      
									  </section>
									</div>
									<div class="dp50">
										<label for="longloc" class="lbl_a">Current Longitude</label>
										<input type="text" id="longloc" readonly="readonly" name="longloc" class="inpt_d" />
										<label for="latloc" class="lbl_a">Current Latitude</label>
										<input type="text" id="latloc" readonly="readonly" name="latloc" class="inpt_d" /><br /><br /><br />
									</div> 
									<fieldset class="sepH_c">
									<legend>Temperature Details</legend>
									<div class="cf">
									  <label for="a_select" class="lbl_a">Min</label>
									  <input type="text" id="mintemp" name="mintemp" class="inpt_d" />	
									  <label for="a_select" class="lbl_a">Max</label>
									  <input type="text" id="maxtemp" name="maxtemp" class="inpt_d" />
									</div>
									</fieldset>
								   </div>
								   <div class="sepH_b cf">
								      <div class="dp50"> 
									<label for="timepicker" class="lbl_a">Select Date & Time</label>
									<input type="text" id="timepicker" class="inpt_b" readonly="readonly" name="timepicker" />
								      </div>
								     <div class="sepH_c dp50">
									<fieldset class="sepH_c">
									<legend>Enter Rainfall (mm)</legend>
									<div class="cf">
									  <input type="text" id="rainfall" name="rainfall" class="inpt_d" />
									</div>
									</fieldset>
								      </div>
								    </div>	

								     <div class="sepH_b cf">
								      <fieldset class="sepH_c">
									<legend>Events</legend>
									<div class="cf dp100">
									  <div class="dp33">
										<input type="checkbox" name="hail" id="hail" value="option_1" class="inpt_c" />
										<label for="hail" class="lbl_c">Hail</label>
									  </div>
									  <div class="dp33">
										<input type="checkbox" name="bushfires" id="bushfires" value="option_2" class="inpt_c" />
										<label for="bushfires" class="lbl_c">Bushfires</label>
									  </div>
									  <div class="dp33">
										<input type="checkbox" name="heavystorm" id="heavystorm" value="option_3" class="inpt_c" />
										<label for="heavystorm" class="lbl_c">Heavy Storm</label><br /><br />
									  </div>
									</div>
									<div class="dp100">
									  <div class="dp33">
										<input type="checkbox" name="cyclone" id="cyclone" value="option_1" class="inpt_c" />
										<label for="cyclone" class="lbl_c">Cyclone</label>
									  </div>
									  <div class="dp33">
										<input type="checkbox" name="fog" id="fog" value="option_2" class="inpt_c" />
										<label for="fog" class="lbl_c">Fog</label>
									  </div>
									  <div class="dp33">
										<input type="checkbox" name="duststorm" id="duststorm" value="option_3" class="inpt_c" />
										<label for="duststorm" class="lbl_c">Dust Storm</label> <br /><br /><br /><br />
									  </div>
									</div>
									<div class="sepH_c">
									<label for="comments" class="lbl_a">Comments / Description</label>
									<textarea id="comments" cols="60" rows="10" name="description"></textarea>
									</div>
								    </fieldset>
								    </div>  
							
								      <button type="submit" class="btn btn_c sepV_a"><span>Submit</span></button>
								      <a href="#" class="vam clear_form">Clear</a>
								</fieldset>
							</div>
						</form> 
						
				</div>
			
			</div>
		</div>
	</div>
	
	<div id="footer">
	   <div class="wrapper">
		  <div class="cf ftr_content">
			<p class="fl">Copyright &copy; 2012 weathercrowd</p>
			
		  </div>
	   </div>	
	</div>
	
	<script type="text/javascript">
		head.js("js/jquery-1.6.2.min.js");
		head.js("lib/jquery-ui/jquery-ui-1.8.15.custom.min.js");
		head.js("lib/datatables/jquery.dataTables.min.js");
		head.js("lib/datatables/dataTables.plugins.js");
		head.js("lib/harvesthq-chosen/chosen.jquery.min.js");
		head.js("lib/visualize/visualize.jQuery.js");
		head.js("lib/visualize/excanvas.js");
		head.js("lib/fusion-charts/FusionCharts.js");
		head.js("lib/fancybox/jquery.easing-1.3.pack.js");
		head.js("lib/fancybox/jquery.fancybox-1.3.4.pack.js");
		head.js("js/jquery.tools.min.js");
		head.js("js/jquery.text-overflow.min.js");
		head.js("js/xbreadcrumbs.js");
		head.js("js/custom.js");
		head.js("lib/timepicker-addon/jquery-ui-timepicker-addon.js");

	      head.ready(function(){
			lga_clearForm.init();
			lga_timepicker.init();
			lga_form_a_validation.init();
			lga_formSubmit.init();
        }); 




	</script>

</body>
</html>
